<template>
  <view class="myAddress">
    <view class="header">
      <view @click="gotoback">取消</view>
      <view @click="goorder">确定</view>
    </view>
    <view class="content">
      <view class="addritem" v-for="(item, index) in addrList" :key="index" @click="()=>currentAddr = index">
        <view class="text">
          <view class="icon1">
            <van-icon name="success" :color="index === currentAddr ? '#55AA77' : 'rgba(0,0,0,0)' " />
          </view>
          <view class="texto">
            <view class="name">
              {{item.name}}
            </view>
            <view class="addr">
              {{item.addr}}
            </view>
          </view>
        </view>
        <view class="icon2">
          <van-icon name="info-o" color="#B0B0B0" @click="editOrDel" />
        </view>
      </view>
      <van-button type="info" size="large" color="#aaa" @click="goaddAddr">添加新地址</van-button>
      <van-popup
        :show="is_show"
        position="bottom"
        custom-style="height: 20%"
        @close="onClose"
      >
      <view class="editDelete">
        <view class="edit" @click="editAddr">
         修改地址 
        </view>
        <view class="delete" @click="deleteAddr">
          删除地址
        </view>
      </view>
      </van-popup>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        addrList: wx.getStorageSync("addrList") || [],
        currentAddr:0,
        is_show:false,
      };
    },
    onLoad(options){
      // console.log(options);
      this.currentAddr = parseInt(options.currentAddr) || 0
      uni.$on("getaddrlist",(key) => {
        this.addrList = key
      })
    },
    methods:{
      gotoback(){
        wx.navigateBack()
      },
      goorder(){
        wx.navigateTo({url:`/pages/order/order?name=${this.addrList[this.currentAddr].name}&addr=${this.addrList[this.currentAddr].addr}&mobile=${this.addrList[this.currentAddr].mobile}&currentAddr=${this.currentAddr}`})
      },
      goaddAddr(){
        wx.navigateTo({url:"/pages/addAddr/addAddr"})
      },
      editOrDel(){
        this.is_show = true
      },
      onClose(){
        this.is_show = false
      },
      deleteAddr(){
        this.addrList.splice(this.currentAddr, 1)
        wx.setStorageSync('addrList', this.addrList)
        this.currentAddr = 0
        this.is_show = false
        wx.showToast({title:"删除成功!"})
      },
      editAddr(){
        wx.navigateTo({url:'/pages/editAddr/editAddr?index='+this.currentAddr})
        this.is_show = false
      }
    }
  }
</script>

<style scoped lang="scss">
.myAddress{
  .header{
    height: 60rpx;
    // padding: 0 40rpx;
    display: flex;
    justify-content: space-between;
    // background-color: #000;
    // align-items: center;
    view{
      display: 1;
      border: none;
      color: #fff;
      width: 50%;
      border-radius: none;
      line-height: 60rpx;
      height: 60rpx;
      background-color: #ccc;
      border: 1px solid #aaa;
      text-align: center;
    }
    view:active{
      background-color: #bbb;
    }
  }
  .content{
    height: calc( 100vh - 60rpx );
    background-color: #EEEEEE;
    .addritem{
      background-color: #fff;
      padding: 0 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 140rpx;
      .text{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon1{
          font-size: 50rpx;
        }
        .texto{
          padding-left: 16rpx;
          .name{
            font-size: 30rpx;
            // text-shadow: 0 1rpx 0 black;
          }
          .addr{
            color: #9D9BA4;
            font-size: 26rpx;
            // text-shadow: 0 1rpx 0 #9D9BA4;
          }
        }
      }
      .icon2{
        font-size: 50rpx;
      }
    }
    .editDelete{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      .edit,.delete{
        height: 50%;
        width: 100%;
        border: 1px solid #eee ;
        // background-color: #ddd;
        color: #aaa;
        line-height: 120rpx;
        text-align: center;
      }
      .edit:active,.delete:active{
        background-color: #eee;
      }
    }
  }
}
</style>
